<template>
  <view class="content">
    <concern-banner ref="concern"></concern-banner>
    <view class="tips-box"> </view>
    <view class="info-box">
      <view class="info-block">
        <view class="tips-content">姓名排盘 </view>

        <view class="section">
          <view class="section-title">您的姓:</view>
          <view class="section-content">
            <input
              v-model="customFormData.firstName"
              maxlength="2"
              class="name input_text"
              placeholder="请输入您的姓"
            />
          </view>
        </view>
        <view class="section">
          <view class="section-title">您的名:</view>
          <view class="section-content">
            <input
              v-model="customFormData.lastName"
              maxlength="3"
              class="name input_text"
              placeholder="请输入您的名"
            />
          </view>
        </view>
        <view class="section">
          <view class="section-title">性别：</view>
          <view class="section-content">
            <uni-data-checkbox
              selectedColor="#000"
              selectedTextColor="#000"
              v-model="customFormData.sex"
              :localdata="sexs"
            />
          </view>
        </view>
        <view class="section">
          <view class="section-title">流派：</view>
          <view class="section-content">
            <uni-data-checkbox
              class="type-style"
              selectedColor="#000"
              selectedTextColor="#000"
              v-model="customFormData.type"
              :localdata="types"
            />
          </view>
        </view>
        <view class="btn-box">
          <view @click="queryStart" class="quiryButton">开始测算</view>
        </view>
      </view>
    </view>
    <activity-box :positionId="601"></activity-box>
    <yipu-logo></yipu-logo>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      customFormData: {
        firstName: "",
        lastName: "",
        sex: 0,
        type: 0,
        date: [],
        area: "",
      },
      sexs: [
        {
          text: "男",
          value: 0,
        },
        {
          text: "女",
          value: 1,
        },
      ],
      types: [
        {
          text: "三才五格",
          value: 0,
        },
        {
          text: "三才六格",
          value: 1,
        },
      ],
      isSolarTime: [],
      solarTimeList: [
        {
          text: "使用真太阳时",
          value: 1,
        },
      ],
      // ad
      hasAd: false,
      adInfo: {
        name: "",
        des: "",
        remark: "",
        skipLinks: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      isConcern: "user/isConcern",
    }),
  },
  methods: {
    queryStart() {
      // 判断用户是否登录并且关注,登录且关注后才可以开始排盘
      if (this.isConcern == true) {
        //跳转到详情页
        let { firstName, lastName, type } = this.customFormData;

        if (firstName == "" || lastName == "") {
          uni.showToast({
            title: "姓名不能为空",
            icon: "none",
          });
          return;
        }
        if (firstName.length > 2 || lastName.length > 3) {
          uni.showToast({
            title: "姓名长度超过限制",
            icon: "none",
          });
          return;
        }
        if (firstName.length == 2 && lastName.length >= 3) {
          uni.showToast({
            title: "姓名长度超过限制",
            icon: "none",
          });
          return;
        }
        if (type == 1 && lastName.length >= 3) {
          uni.showToast({
            title: "三才六格流派名长度不能超过2",
            icon: "none",
          });
          return;
        }
        let info = {
          firstName: this.customFormData.firstName,
          lastName: this.customFormData.lastName,
          type: this.customFormData.type,
        };
        if (type == 0) {
          uni.navigateTo({
            url: `/pages/xingming/detail?info=${JSON.stringify(info)}`,
          });
        } else {
          uni.navigateTo({
            url: `/pages/xingming/liugeDetail?info=${JSON.stringify(info)}`,
          });
        }
      } else {
        this.$refs.concern.concernPopup();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  width: 100%;
}

.tips-box {
  height: 400rpx;
  // background-color: #c6a680;
  width: 100%;
}

.tips-content {
  color: #1e1e1e;
  height: 65rpx;
  width: 100%;
  margin-top: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.info-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -230rpx;
}

.info-block {
  background-color: #fff;
  opacity: 0.9;
  width: 640rpx;
  height: fit-content;
  border-radius: 0rpx;
  box-shadow: 0 0 20rpx #666;
  display: flex;
  flex-direction: column;
  padding-bottom: 48rpx;
}

.section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #000;
  margin-bottom: 24rpx;
}

.info-tips {
  margin: 58rpx 0;
}

.section-title {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 32rpx;
  color: #32312e;
}

.section-content {
  width: 440rpx;
  height: 88rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 30rpx;
  border: 1px solid #dddddd;
}

.type-style {
  ::v-deep .checklist-group {
    flex-wrap: nowrap;
    .checklist-content {
      white-space: nowrap;
    }
  }
}

.plural-section {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  height: 88rpx;
  justify-content: center;
}

.plural-title {
  height: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.btn-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 32rpx 0 48rpx;
}

.quiryButton {
  width: 521rpx;
  height: 78rpx;

  font-size: 32rpx;
  color: #fff;
  background-color: #1e1e1eff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.input_text {
  font-size: 32rpx;
  white-space: nowrap;
}
</style>
